import React, { Component, PropTypes } from 'react'
import { Modal, Icon } from 'antd-mobile'
import { NavHeader } from '../common'

export default class TransactionDetail extends Component {
  constructor() {
    super()
    this.state = {
      table: false,
    }
  }
  render() {
    const { visible, onClose } = this.props
    const { table } = this.state
    return (
      <Modal
        visible={visible}
        animated={false}
        closable={false}
        className={`rt-transaction-detail-modal`}
      >
        <NavHeader title="历史交易" onClick={onClose} />

        <div className={`cm-scrollable-container`}>
          {
            Array(11).fill(1).map((v, i) => (
              <div key={Math.random()} className={`-row ${i === 0 ? '-first' : ''}`}>
                <span className={`-diff`}>开仓时间</span>
                <span>04-11 15:10</span>
              </div>
            ))
          }
          <div key={Math.random()} className={`-row ${table ? '-border-status' : ''}`}>
            <span className={`-diff`}>表格</span>
            <Icon
              type={`circle-o-${table ? 'up' : 'down'}`}
              onClick={() => {
                this.setState({
                  table: !table,
                })
              }}
            />
          </div>
          {
            !table ? null
            : (
              <div className={`-table`}>
                <div key={Math.random()} className={`-tr -header`}>
                  <span className={`-time`}>时间</span>
                  <span>止盈</span>
                  <span>止损</span>
                  <span>递延</span>
                </div>
                {
                  Array(4).fill(1).map(v => (
                    <div key={Math.random()} className={`-tr`}>
                      <span className={`-time`}>09-15 00:23</span>
                      <span>20%</span>
                      <span>30%</span>
                      <span>12元</span>
                    </div>
                  ))
                }
              </div>
            )
          }
        </div>
      </Modal>
    )
  }
}

TransactionDetail.propTypes = {
  visible: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
}